<template>

  <div class="app-container">

    <el-form :inline="true" :model="carQuery" class="demo-form-inline">


        <el-form-item label="车牌号">
          <el-input v-model="carQuery.carNo" placeholder="车牌号"></el-input>
        </el-form-item>


      <el-form-item>
        <router-link :to="'/basic_setting/car_add'">
          <el-button type="info"  icon="el-icon-edit"
          >添加</el-button>
        </router-link>
        <el-button type="primary" @click="getCarList()">查询</el-button>
        <el-button type="warning" @click="refresh()">重置</el-button>
        <el-button type="danger" @click="removeBatch(sels)"  :disabled="this.sels.length === 0||this.disabled">删除</el-button>
      </el-form-item>
    </el-form>

    <el-table  :data="carList" style="width: 100%" @selection-change="selsChange"  >


      　　　　
      <el-table-column label="序号" width="70" align="center">
        <!-- 插槽-->
        <!-- scope  代表范围，作用域是整个表格-->
        <template slot-scope="scope">
          {{(current - 1) * limit + scope.$index + 1}}
        </template>
      </el-table-column>


      <el-table-column prop="id"
                       type="selection"
                       width="30">

      </el-table-column>
      <el-table-column prop="carNo" label="车牌号"> </el-table-column>
      <el-table-column prop="brand" label="品牌"> </el-table-column>
      <el-table-column prop="model" label="型号"> </el-table-column>
      <el-table-column prop="color" label="颜色"> </el-table-column>
      <el-table-column prop="carSeats" label="座位数"> </el-table-column>
      <el-table-column prop="dept" label="部门"> </el-table-column>
      <el-table-column prop="state" label="车辆状态"> </el-table-column>


      <el-table-column prop="isdisable"  label="是否启用" >
        <template scope="scope">


          <p v-if="scope.row.isdisable=='1'">启用</p>
          <p v-if="scope.row.isdisable=='0'">未启用</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <!-- 提供插槽-->
        <template slot-scope="scope">

          <router-link :to="'/basic_setting/car_edit/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit"
            >修改</el-button>
          </router-link>



          <router-link :to="'/basic_setting/car_imgPath/'+scope.row.id">
            <el-button type="success" size="mini" icon="el-icon-edit"
            >图片管理</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        :page-size="limit"
        :current-page="current"
        layout="total, prev, pager, next,jumper"
        :total="total"
        style="padding: 30px 0 ; text-align: center"
        @current-change="getCarList" >
      </el-pagination>
    </div>


  </div>


</template>

<script>
import carApi from '@/api/rao_car.js';

export default {
  name: 'list',
  data(){
    return{
      current: 1,
      limit: 4,
      carQuery: {},
      carList: null,
      total: 0,
      checked:false,
      zz: [0],
      sels:[],
      disabled:true,
      select:{}

    }
  },

  created(){
    this.getCarList()
  },

  methods:{
    selsChange(sels) {
      this.sels = sels;
      for(let element of this.sels){
        this.disabled = false;
      }
    },

    removeBatch(rows){
      var ids = [];
      rows.forEach(element =>{
        ids.push(element.id)
      })
      this.$confirm('确定要删除选中的文件吗?','提示').then(() =>{
        carApi.deleteCar(ids).then((response) => {
          this.getCarList()
          this.$message({
            type: "success",
            message: "删除成功!",
          })
        })
      })
    },


    getCarList(current=1){
      this.current=current
      carApi.pageListCarCondition(this.current,this.limit,this.carQuery)
        .then(response => {
          console.log("获取讲师列表成功")
          this.carList=response.data.items
          this.total=response.data.total
        })
    },



    refresh(){
      this.carQuery= {}
      this.getCarList()
    },
    removeCar(id) {
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        carApi.deleteCar(id).then((response) => {
          this.getCarList()
          this.$message({
            type: "success",
            message: "删除成功!",
          })
        })

      })
    },

    handleSelectionChange(val){
      this.multipleSelection = val;
    }
  }



}
</script>

<style>

</style>
